<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>V3</title>   
    <style>
      .one{
        background-color: aqua;
      }
      .two{
        background-color: beige;
      }
    </style>
  </head>
  <body>
    <div id="app">   
     <select name="" id="" v-model="addid">
      <option value="-1">阿斯顿发斯蒂芬斯蒂芬</option>
      <option  v-for="d   in tableData "   :value="d.id">{{ d.name  }} </option>
     </select> 

<hr/>

      

      <table border="1">
        <thead>
          <tr>
            <th>#</th>
            <th>date</th>
            <th>name</th>
            <th>address</th>
          </tr>
        </thead>
        <tbody>
          <tr :class=" index %2==0? 'one' :'two'   "  v-for="(data,index )   in tableData ">
            <th  >{{ index +1  }}</th>
            <td>{{  data.date }}</td>
            <td v-html="data.name"></td>
            <td> {{  data.address  }} </td>
          </tr>

        </tbody>

      </table>
      

      
      
      <ol>
          <template  v-for=" data   in tableData ">
              <li>  {{data}} </li>
          </template>
        </ol>


         {{ message  }}   
         <ul>
          <li v-for="item   in items">1111111111111111</li>       

         </ul>      
    </div>   
  </body>
</html>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const tableData  = [
  {
    id:1,
    date: '2016-05-03',
    name: 'Tom1',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {id:2,
    date: '2016-05-02',
    name: 'Tom2',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {id:3,
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id:4,
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
   
  const { createApp } = Vue;
  createApp({    
    data() {
      return {       
        // items:[1,2,3,4],
        tableData  ,
        message: "Hello Vue!",        
        addid:3
      };
    },   
  }).mount("#app");
</script>
